<template>
  <zm-view ref="view" background="#a582f7">
    <zm-navbar back-icon-color="#fff" :border-bottom="false" background="transparent" immersive> </zm-navbar>
    <view class="header-section">
      <image class="section-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/raffle-bg.png')" mode="scaleToFill" />
      <view class="integral-text">我的积分：{{ userInfo.integral }}</view>
    </view>
    <view class="blindbox-section">
      <image class="section-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/raffle-jp-bg.png')" mode="scaleToFill" />
      <view class="count-text">剩余{{ drawMStock.tMStock }}次，每次需要{{ drawMStock.consumeIntegral }}积分</view>
      <view class="relative">
        <view class="grid grid-cols-3 gap-x-10 px-20 pb-48">
          <blindbox-box v-for="(item, index) in 3" :key="index" :form="drawRule" @click="handleGetDrawRule" @open="handleOnBlindboxOpen"></blindbox-box>
        </view>
      </view>
    </view>
    <view class="prize-section">
      <image class="section-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/raffle-jpc-bg.png')" mode="scaleToFill" />
      <view class="relative">
        <scroll-view scroll-x class="w-full">
          <view class="flex px-20 pb-48">
            <view v-for="(item, index) in drawRule.ruleList" :key="index" class="prize-item">
              <view class="prize-image-wrap">
                <image class="prize-image" :src="item.img" mode="scaleToFill" />
              </view>
              <view class="prize-name">
                <view class="flex-1 text-row-1 text-center">{{ item.name }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="button-section">
      <image
        class="button click-animation"
        :src="useImage('/zuimei-film-oss/1.0.0/images/raffle-prize.png')"
        mode="scaleToFill"
        @click="toView('pages/main/blindbox-prize/blindbox-prize')"
      />
      <image class="button click-animation" :src="useImage('/zuimei-film-oss/1.0.0/images/raffle-rule.png')" mode="scaleToFill" @click="showRuleDialog = true" />
    </view>
    <zm-dialog :show.sync="showRuleDialog" :show-confirm-button="false" background="linear-gradient(0deg, #F7F8F0 0%, #F8EBF9 100%)">
      <view slot="title" class="font-46 text-center mt-50">活动规则</view>
      <zm-richtext :content="drawRule.remark"></zm-richtext>
      <view slot="outside" class="flex justify-center mt-50">
        <zm-icon name="close" color="#fff" size="60rpx" @click="showRuleDialog = false"> </zm-icon>
      </view>
    </zm-dialog>
    <!-- 中奖弹窗 -->
    <zm-dialog :show.sync="showPrizeDialog" :show-confirm-button="false" width="80vw" background="linear-gradient(0deg, #F7F8F0 0%, #F8EBF9 100%)">
      <view class="prize-dialog-content">
        <text class="font-46 text-center">恭喜您抽中{{ prize.awardDes }}</text>
        <image class="dialog-btn" :src="useImage('/zuimei-film-oss/1.0.0/images/raffle-look.png')" mode="scaleToFill" @click="handleJumpRecord" />
      </view>
      <view slot="outside" class="flex justify-center mt-50">
        <image class="dialog-image" :src="useImage('/zuimei-film-oss/1.0.0/images/raffle-prize-dialog-bg.png')" mode="scaleToFill" />
        <zm-icon name="close" color="#fff" size="60rpx" @click="showPrizeDialog = false"> </zm-icon>
      </view>
    </zm-dialog>
    <!-- 未中奖弹窗 -->
    <zm-dialog :show.sync="showNotPrizeDialog" :show-confirm-button="false" width="514rpx" background="linear-gradient(0deg, #F7F8F0 0%, #F8EBF9 100%)">
      <view class="not-prize-dialog-content">
        <text class="font-46 font-500">很遗憾，未中奖</text>
        <text class="font-28">再差一点就中奖了，再试试手气吧</text>
        <image class="dialog-btn" :src="useImage('/zuimei-film-oss/1.0.0/images/raffle-once.png')" mode="scaleToFill" @click="showNotPrizeDialog = false" />
      </view>
      <view slot="outside" class="flex justify-center mt-50">
        <image class="not-dialog-image" :src="useImage('/zuimei-film-oss/1.0.0/images/raffle-unprize-dialog-bg.png')" mode="scaleToFill" />
        <zm-icon name="close" color="#fff" size="60rpx" @click="showNotPrizeDialog = false"> </zm-icon>
      </view>
    </zm-dialog>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import BlindboxBox from "./components/blindbox-box/blindbox-box"
import { mapGetters } from "vuex"
export default {
  components: { BlindboxBox },
  mixins: [page, hook],
  data() {
    return {
      showPrizeDialog: false,
      showNotPrizeDialog: false,
      showRuleDialog: false,
      drawRule: {},
      drawMStock: {},
      prize: {}
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  onLoad() {
    this.handleGetDrawRule()
  },
  methods: {
    async handleGetDrawRule() {
      this.drawRule = await uni.$api.integral.drawRule()
      this.drawMStock = await uni.$api.integral.getDrawMStock({ programId: this.drawRule.programId })
    },
    handleJumpRecord() {
      this.showPrizeDialog = false
      this.toView("pages/main/blindbox-prize/blindbox-prize")
    },
    handleOnBlindboxOpen(data) {
      this.prize = data
      if (data.isAward == 1) {
        this.showPrizeDialog = true
      } else {
        this.showNotPrizeDialog = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header-section {
  width: 100%;
  height: 1024rpx;
  .section-bg {
    width: 100%;
    height: 100%;
  }
  .integral-text {
    top: 380rpx;
    left: 50%;
    color: #563cbb;
    font-size: 36rpx;
    position: absolute;
    transform: translateX(-50%);
  }
}
.blindbox-section {
  height: 420rpx;
  display: flex;
  margin: 0 24rpx;
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  .section-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .count-text {
    top: 18rpx;
    left: 50%;
    font-size: 32rpx;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    position: absolute;
    white-space: nowrap;
    transform: translateX(-50%);
    text-shadow: 0rpx 6rpx 11rpx #7341d0;
  }
}
.prize-section {
  height: 420rpx;
  display: flex;
  margin: 0 24rpx;
  margin-top: 26rpx;
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  .section-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .prize-item {
    width: 214rpx;
    height: 268rpx;
    padding: 15rpx;
    display: flex;
    position: relative;
    margin-right: 10rpx;
    padding-bottom: 0;
    border-radius: 20rpx;
    justify-content: center;
    background: linear-gradient(0deg, #9a82f1 0%, #e3deff 100%);
    .prize-image-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top-left-radius: 14rpx;
      border-top-right-radius: 14rpx;
      height: calc(100% - 65rpx);
      .prize-image {
        width: 100%;
        height: 100%;
      }
    }

    .prize-name {
      left: 0;
      width: 100%;
      bottom: 0;
      height: 65rpx;
      display: flex;
      color: #ffffff;
      padding: 0 12rpx;
      overflow: hidden;
      font-size: 28rpx;
      position: absolute;
      align-items: center;
      justify-content: center;
      border-radius: 0rpx 0rpx 20rpx 20rpx;
      background: linear-gradient(0deg, #815fe9 0%, #9475f3 100%);
    }
  }
}
.button-section {
  display: flex;
  padding: 0 24rpx;
  margin-top: 37rpx;
  padding-bottom: 200rpx;
  justify-content: space-between;
  .button {
    width: 348rpx;
    height: 108rpx;
  }
}
.dialog-btn {
  width: 300rpx;
  height: 80rpx;
  margin-top: 90rpx;
  margin-bottom: 30rpx;
}
.dialog-image {
  top: -160rpx;
  width: 400rpx;
  height: 405rpx;
  position: absolute;
  pointer-events: none;
}
.not-dialog-image {
  top: -130rpx;
  width: 400rpx;
  height: 405rpx;
  position: absolute;
  pointer-events: none;
}
.prize-dialog-content {
  display: flex;
  margin-top: 250rpx;
  align-items: center;
  flex-direction: column;
  justify-content: centers;
  .dialog-image {
    top: -160rpx;
    width: 400rpx;
    height: 405rpx;
    position: absolute;
    pointer-events: none;
  }
}
.not-prize-dialog-content {
  display: flex;
  margin-top: 160rpx;
  align-items: center;
  flex-direction: column;
  justify-content: centers;
}
</style>
